
@import "./util.less";

.header{
    padding: 0 8px;
    position: relative;
    background-color:rgb( 255, 139, 0);
    .logo{
        position: absolute;
        top: 0px;
        left: 8px;
        display: block;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
      .fa-angle-left{
          color: white;
          font-size: 30px;
          line-height: 44px;
      }
        
    }
    >h1{
        width: 100%;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-weight: normal;
        color: white;
        font-size: 20px;
        margin: 0px;
    }
    .download{
        position: absolute;
        top: 0px;
        right: 5px;
        padding: 7px;
        display: block;
        >img{
            max-height: 34px;
            overflow: hidden;
        }
    }
}

    // 导航区域
    .nav{
        .hd{
           
            display: flex;
            .title{
                flex: 1;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-flex: 1;
                border-bottom: 1px solid #dadada;
                ul{
                    width: 100%;
                    li{
                        float: left;
                        line-height: 39px;
                        width: 33%;
                        position: relative;
                        text-align: center;
                        >a{
                            display: inline-block;
                            width: 100%;
                            
                            .fa-sort-down{
                                width: 24px;
                                height: 24px;
                                vertical-align: middle;
                            }
                        }
                    }
                }
            }
            .search{
                width: 46px;
                position: relative;
                border-bottom: 1px solid #dadada;
                border-left: 1px solid #dadada;
                >a{
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    display: inline-block;
                    text-align: center;
                    
                }
            }
        }
        
        .downbox{
            width: 100%;
            background-color: #ffffff;
            position: absolute;
            left: 0px;
            top: 84px;
            box-shadow: 0px 3px 6px #dddddd;
            display: none;
            &.on{
                display: block;
                z-index: 10;
            }
            >ul{
                >li{
                    border-bottom: 1px solid #dadada;
                    &:first-child{
                        border-top: 1px solid #dadada;
                    }
                    
                    >a{
                        display: block;
                        line-height: 40px;
                        padding: 0px 10px;
                    }
                }
            }
            
        }
        
    }

    //商品列表区
    .main{
        background-color: #f1f1f1;
        padding: 6px 0px;
        ul{
            li{
                text-align: center;
                width: 50%;
                float: left;
                a{
                    display: block;
                    margin: 4px;
                    background-color: #ffffff;
                    img{
                         width: 100%;
                    }
                    .name{
                        color: #333333;
                        word-break: break-all;
                        padding: 0 10px;
                        height: 14px;
                        overflow: hidden;
                        font-size: 12px;
                        margin-top: 10px;
                        line-height: 14px;
                        font-weight: normal;
                        text-align: left;
                        margin-top: 6px;
                       
                    }
                    .price{
                        background-color: #ffffff;
                        display: block;
                        width: 100%;
                        padding: 0 10px;
                        text-align: left;
                        margin-top: 5px;
                        color: #f8601d;
                        font-size: 20px;
                        >span{
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }










